<template>
	<div class="edit-comp-root">
		<div class="row-line-head row-reverse" style="height: 42px">
			<el-button @click="onDeleteClick" :disabled="selectPartsSpec === null || onAdding" :style="{ background: onDeleting ? 'rgb(188, 0, 15) !important' : '', color: onDeleting ? '#FFF !important' : '' }">
				{{ $t("message.environmentSetting.btns.topBtn.del") }}
			</el-button>
			<el-button @click="onAddClick" size="mini" :disabled="dmgCode == null || onAdding || onDeleting" style="margin-right: 20px" :style="{ background: onAdding ? 'rgb(188, 0, 15) !important' : '', color: onAdding ? '#FFF !important' : '' }">
				{{ $t("message.environmentSetting.btns.topBtn.save") }}
			</el-button>
		</div>
		<div class="divider" />

		<div class="edit-comp">
			<div class="edit-comp-elinput">
				<el-form label-position="left" label-width="205px" :model="this.PartsSpecDetailTable" :rules="rules" ref="formLabelAlign">
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[0].label : ''" style="height=10px">
						<el-input class="orange" v-model="PartsSpecDetailTable.partsName" style="width=200px" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.partsName = $setMaxLength(PartsSpecDetailTable.partsName, 30)">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[1].label : ''" prop="partsShapeName">
						<el-select class="ipt" v-model="PartsSpecDetailTable.partsShapeName" placeholder=" "
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.partsShapeNames" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[2].label : ''" style="height=10px">
						<el-input class="iptYellow" v-model="PartsSpecDetailTable.partsGroupName" :disabled="true"
							size="small" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[3].label : ''" style="height=10px">
						<el-input class="iptYellow" v-model="PartsSpecDetailTable.partsAttributeName" :disabled="true"
							size="small" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[4].label : ''" style="height=10px">
						<el-input class="FFF text-right" v-model="PartsSpecDetailTable.designTemperature" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.designTemperature = addLimitation(PartsSpecDetailTable.designTemperature)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[5].label : ''" style="height=10px">
						<el-input class="FFF text-right" v-model="PartsSpecDetailTable.designPressure" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.designPressure = addLimitation(PartsSpecDetailTable.designPressure)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[6].label : ''" style="height=10px">
						<el-input class="FFF text-right" v-model="PartsSpecDetailTable.regularTemperature" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.regularTemperature = addLimitation(PartsSpecDetailTable.regularTemperature)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[7].label : ''" style="height=10px">
						<el-input class="FFF text-right" v-model="PartsSpecDetailTable.regularPressure" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.regularPressure = addLimitation(PartsSpecDetailTable.regularPressure)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[8].label : ''" style="height=10px">
						<el-input class="FFF text-right" v-model="PartsSpecDetailTable.operationTemperature" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.operationTemperature = addLimitation(PartsSpecDetailTable.operationTemperature)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[9].label : ''" style="height=10px">
						<el-input class="FFF text-right" v-model="PartsSpecDetailTable.operationPressure" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.operationPressure = addLimitation(PartsSpecDetailTable.operationPressure)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[10].label : ''" style="height=10px">
						<el-input class="FFF" v-model="PartsSpecDetailTable.baseMaterialName" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.baseMaterialName = $setMaxLength(PartsSpecDetailTable.baseMaterialName, 40)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[11].label : ''" style="height=10px">
						<el-input class="FFF" v-model="PartsSpecDetailTable.cladMaterialName" :disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small" autocomplete="off" @input="PartsSpecDetailTable.cladMaterialName = $setMaxLength(PartsSpecDetailTable.cladMaterialName, 40)"></el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[12].label : ''" style="height=10px">
						<el-input class="FFF text-right"
							v-model="PartsSpecDetailTable.baseProductionThickness"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.baseProductionThickness = $setMyNum(PartsSpecDetailTable.baseProductionThickness, '4 - 2')">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[13].label : ''" style="height=10px">
						<el-input class="FFF text-right"
							v-model="PartsSpecDetailTable.cladProductionThickness"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.cladProductionThickness = $setMyNum(PartsSpecDetailTable.cladProductionThickness, '4 - 2')">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[14].label : ''" style="height=10px">
						<el-input class="FFF text-right"
							v-model="PartsSpecDetailTable.managementThickness"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.managementThickness = $setMyNum(PartsSpecDetailTable.managementThickness, '4 - 2')">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[15].label : ''" style="height=10px">
						<el-input class="FFF text-right"
							v-model="PartsSpecDetailTable.limitThickness"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.limitThickness = $setMyNum(PartsSpecDetailTable.limitThickness, '4 - 2')">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[16].label : ''" style="height=10px">
						<el-input class="FFF text-right"
							v-model="PartsSpecDetailTable.coefficient"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.coefficient = $setMyNum(PartsSpecDetailTable.coefficient, '3 - 2')">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[17].label : ''" style="height=10px">
						<el-input class="FFF text-right"
							v-model="PartsSpecDetailTable.checkCycle"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.checkCycle = $setMyNum(PartsSpecDetailTable.checkCycle, '3 - 0')">
						</el-input>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[18].label : ''" style="height=10px">
						<el-date-picker class="date_ipt" v-model="PartsSpecDetailTable.startUse" placeholder=" " type="month"
								:format="startUseFormat" :value-format="startUseFormat">
						</el-date-picker>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[19].label : ''" style="height=10px">
						<el-select class="ipt" v-model="PartsSpecDetailTable.corrosionLoopNumber" placeholder=" "
							:class="(isEditState && canEditAuthorityInfo ? '' : '')"
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.corrosionLoopNumbers" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[20].label : ''">
						<el-select class="ipt" v-model="PartsSpecDetailTable.damageFactor1" placeholder=" "
							:class="(isEditState && canEditAuthorityInfo ? '' : '')"
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.damageFactorList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[21].label : ''">
						<el-select class="ipt" v-model="PartsSpecDetailTable.damageFactor2" placeholder=" "
							:class="(isEditState && canEditAuthorityInfo ? '' : '')"
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.damageFactorList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[22].label : ''">
						<el-select class="ipt" v-model="PartsSpecDetailTable.damageFactor3" placeholder=" "
							:class="(isEditState && canEditAuthorityInfo ? '' : '')"
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.damageFactorList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[23].label : ''">
						<el-select class="ipt" v-model="PartsSpecDetailTable.damageFactor4" placeholder=" "
							:class="(isEditState && canEditAuthorityInfo ? '' : '')"
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.damageFactorList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[24].label : ''">
						<el-select class="ipt" v-model="PartsSpecDetailTable.damageFactor5" placeholder=" "
							:class="(isEditState && canEditAuthorityInfo ? '' : '')"
							:disabled="selectPartsSpec === null || !selectPartsSpec">
							<el-option v-for="item in this.damageFactorList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="this.partsItemLabelList.length > 0 ? this.partsItemLabelList[25].label : ''" style="height=10px">
						<el-input class="orange text-right"
							v-model="PartsSpecDetailTable.displayOrder"
							:disabled="selectPartsSpec === null || !selectPartsSpec"
							size="small"
							autocomplete="off"
							@input="PartsSpecDetailTable.displayOrder = $setMyNum(PartsSpecDetailTable.displayOrder, '4 - 0')">
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="edit-comp-unit">
				<div class="footer1">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[4].unitLabel : '' }}</span>
				</div>
				<div class="footer2">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[5].unitLabel : '' }}</span>
				</div>
				<div class="footer3">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[6].unitLabel : '' }}</span>
				</div>
				<div class="footer4">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[7].unitLabel : '' }}</span>
				</div>
				<div class="footer5">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[8].unitLabel : '' }}</span>
				</div>
				<div class="footer6">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[9].unitLabel : '' }}</span>
				</div>
				<div class="footer7">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[12].unitLabel : '' }}</span>
				</div>
				<div class="footer8">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[13].unitLabel : '' }}</span>
				</div>
				<div class="footer9">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[14].unitLabel : '' }}</span>
				</div>
				<div class="footer10">
					<span>{{ partsItemLabelList.length > 0 ? partsItemLabelList[15].unitLabel : '' }}</span>
				</div>
			</div>
		</div>

		<div class="bottom-lay">
			<el-button @click="onCancelClick" style="margin-right: 20px" :disabled="isPartsSpecTableNoData">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>

			<el-button type="primary" class="activeBtn" @click="onConfirmClick" :disabled="isPartsSpecTableNoData">
				{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
			</el-button>
		</div>

	</div>
</template>

<script>
import { GetPartsSpecDetail,
		SavePartsSpecDetail,
		GetPartsSpecSaveMessage,
		GetMissingInputMessage,
		GetDuplicationMessage,
		DeletePartsSpecDetail,
		GetDeleteMessage,
		SelectPartsShape} from "@/api/api";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
    props: ["partsItemLabelList", "PltCode", "dmgCode", "selectPartsSpec", "partsShapeNames", "damageFactorList", "corrosionLoopNumbers", "partsSpecTableCount"],
	// dataプロパティ：変更が検知されるような値
	data() {
		var GetSelectPartsShape = (rule, value, callback) => {
			let Dto = {
				partsShapeName: this.PartsSpecDetailTable.partsShapeName,
			}
			SelectPartsShape(Dto).then((res) => {
				if (res.data.code === 0) {
					this.PartsSpecDetailTable.partsGroupName = res.data.data.partsShapeGroup;
					this.PartsSpecDetailTable.partsAttributeName = res.data.data.partsShapeAttribute;
				}
			});
		};
		const SAVE_PARTS_SPEC_DETAIL_RESULT = {
			success: 'success',
			error: 'error',
			cancel: 'cancel'
		};
		return {
			onAdding: false,
			onDeleting: false,
			PartsSpecDetailTable: {
				partsCode: null,
				dmgCode: null,
				pltCode: null,
				partsName: "",
				partsShapeName: "",
				partsGroupName: "",
				partsAttributeName: "",
				designTemperature: "",
				designPressure: "",
				regularTemperature: "",
				regularPressure: "",
				operationTemperature: "",
				operationPressure: "",
				baseMaterialName: "",
				cladMaterialName: "",
				baseProductionThickness: "",
				cladProductionThickness: "",
				limitThickness: "",
				managementThickness: "",
				coefficient: "",
				checkCycle: null,
				startUse: "",
				corrosionLoopNumber: "",
				damageFactor1: "",
				damageFactor2: "",
				damageFactor3: "",
				damageFactor4: "",
				damageFactor5: "",
				machineCode: null,
				displayOrder: null,
			},
			// ユーザーが手動でPartsSpecDetailTableの中身を変更したとき【以外】は必ずPartsSpecDetailTableの値をクローンすること
			tempPartsSpecDetailTable: {
				partsCode: null,
				dmgCode: null,
				pltCode: null,
				partsName: "",
				partsShapeName: "",
				partsGroupName: "",
				partsAttributeName: "",
				designTemperature: "",
				designPressure: "",
				regularTemperature: "",
				regularPressure: "",
				operationTemperature: "",
				operationPressure: "",
				baseMaterialName: "",
				cladMaterialName: "",
				baseProductionThickness: "",
				cladProductionThickness: "",
				limitThickness: "",
				managementThickness: "",
				coefficient: "",
				checkCycle: null,
				startUse: "",
				corrosionLoopNumber: "",
				damageFactor1: "",
				damageFactor2: "",
				damageFactor3: "",
				damageFactor4: "",
				damageFactor5: "",
				machineCode: null,
				displayOrder: null,
			},
			isSaveButtonEnable: false,
			isEditing: false,
			tmpPartsName: "",
			isPartsSpecTableNoData: true,
			rules: {
				partsShapeName: [
					{
						validator: GetSelectPartsShape,
						trigger: "change",
					},
				],
			},
			SAVE_PARTS_SPEC_DETAIL_RESULT,
			startUseFormat: "yyyy-MM"
		};
	},
	// watchとは
	// データの変更があった場合に、事前に登録した処理を実行する。
	watch: {
		selectPartsSpec(val) {
			if (this.selectPartsSpec === undefined || this.selectPartsSpec === null || this.selectPartsSpec.partsName !== "") {
				this.onAdding = false;
			}
			this.GetPartsSpecDetail();
		},
		partsSpecTableCount(val) {
			this.isPartsSpecTableNoData = val <= 0;
		},
		PartsSpecDetailTable: {
            handler() {
				this.$store.commit("changeIsCurrentNext", JSON.stringify(this.PartsSpecDetailTable) === JSON.stringify(this.tempPartsSpecDetailTable));
            },
            deep: true,
        },
	},

	// computedの特徴
	// 返り値が必要
	// 「リアクティブな値を参照していない場合」再実行されることはない
	// 「リアクティブな値を参照している場合」参照している値が更新されたときのみ再実行される
	// setterを使用しない場合、読み取りしかできない
	// setterを使用しない場合引数を取れない
	// ※リアクティブな値とは変更が検知されるような値(dataプロパティに定義した値など)
	// computed内に実装した関数内で仕様されている値が変わると再計算される。
    // methodとの違いは依存している値が更新されている時のみ実行されること。methodは依存している値かどうかに関係なく毎回実行される。
	computed: {
	},

	methods: {
		async onDeleteClick() {
			this.onDeleting = true;
			let DeleteMessageDto = {
				label: this.PartsSpecDetailTable.partsName
			}
			GetDeleteMessage(DeleteMessageDto).then((res) => {
				if (res.data.code == 451) {
					this.$confirm(res.data.msg, '', {
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel',
						type: 'warning'
					}).then(() => {
						let Dto = {
							partsCode: this.selectPartsSpec !== null  ? this.selectPartsSpec.partsCode : null,
							dmgCode: this.dmgCode,
						}
						DeletePartsSpecDetail(Dto).then((res) => {
							if (res.data.code === 0) {
								this.$message({
									type: 'success',
									message: res.data.msg
								});
							}
							this.$store.commit("changeIsCurrentNext", true);
							this.$emit("onDeletePartsSpec");
							this.onDeleting = false;
						});
					}).catch(() => {
						this.onDeleting = false;
						return;
					});
				} else {
					this.onDeleting = false;
					return;
				}
			});


			this.onAdding = false;
		},
		async onAddClick() {
			/// まず編集していたら保存から
			if (JSON.stringify(this.PartsSpecDetailTable) !== JSON.stringify(this.tempPartsSpecDetailTable)) {
				var copySavePartsSpecDetail = _.cloneDeep(this.PartsSpecDetailTable);
				// 保存に失敗したら追加は行わず編集に戻る
				let result = await this.SavePartsSpecDetail(copySavePartsSpecDetail, true);
				if (result !== this.SAVE_PARTS_SPEC_DETAIL_RESULT.error) {
					if (result === this.SAVE_PARTS_SPEC_DETAIL_RESULT.cancel) {
						this.$store.commit("changeIsCurrentNext", true);
					}

					this.onAdding = true;
					this.$emit("onAddPartsSpec");
				}
			} else {
				this.onAdding = true;
				this.$emit("onAddPartsSpec");
			}
		},
		onCancelClick() {
			if (this.onAdding) {
				this.PartsSpecDetailTable  = {
					partsCode: null,
					dmgCode: null,
					pltCode: null,
					partsName: "",
					partsShapeName: "",
					partsGroupName: "",
					partsAttributeName: "",
					designTemperature: "",
					designPressure: "",
					regularTemperature: "",
					regularPressure: "",
					operationTemperature: "",
					operationPressure: "",
					baseMaterialName: "",
					cladMaterialName: "",
					baseProductionThickness: "",
					cladProductionThickness: "",
					limitThickness: "",
					managementThickness: "",
					coefficient: "",
					checkCycle: null,
					startUse: "",
					corrosionLoopNumber: "",
					damageFactor1: "",
					damageFactor2: "",
					damageFactor3: "",
					damageFactor4: "",
					damageFactor5: "",
					machineCode: null,
					displayOrder: null,
				}
				this.tempPartsSpecDetailTable = _.cloneDeep(this.PartsSpecDetailTable);
				this.$store.commit("changeIsCurrentNext", true);
				// テーブルに追加行の削除イベント発行
				this.$emit("onAddPartsSpecCancel");
				this.onAdding = false;
			}
			else {
				this.PartsSpecDetailTable = _.cloneDeep(this.tempPartsSpecDetailTable);
			}
		},
		async onConfirmClick() {
			var copySavePartsSpecDetail = _.cloneDeep(this.PartsSpecDetailTable);
			let result = await this.SavePartsSpecDetail(copySavePartsSpecDetail, true);
			if (result === this.SAVE_PARTS_SPEC_DETAIL_RESULT.success) {
				this.tempPartsSpecDetailTable = _.cloneDeep(this.PartsSpecDetailTable); /// onSavedPartsSpecの後selectPartsSpecの変更が検知されるため一緒の値にしておく
				// 部位仕様保存後リスト部を更新する
				this.$emit("onSavedPartsSpec", true);
			}
		},

		// 画面遷移時の保存時に切り替わった後の情報を送らないように、引数でクローンしたPartsSpecDetailTableを受け取る。
		async SavePartsSpecDetail(PartsSpecDetailTable, isConfirmOrAddButton) {
			let res = await GetPartsSpecSaveMessage();
			if (res.data.code == 451) {
				let result = await this.$confirm(res.data.msg, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				}).then(async () => {
					if (PartsSpecDetailTable.partsName === "") {
						let PartsNameDto = {
							label: "部位名称"
						}
						GetMissingInputMessage(PartsNameDto).then((res) => {
							if (res.data.code === 452) {
								this.$alert(res.data.msg, ' ', {
									confirmButtonText: 'OK',
									type: 'warning',
								});
							}
						});
						return this.SAVE_PARTS_SPEC_DETAIL_RESULT.error;
					}

					if (PartsSpecDetailTable.displayOrder === null || PartsSpecDetailTable.displayOrder === "") {
						let DisplayOrderDto = {
							label: "表示順"
						}
						GetMissingInputMessage(DisplayOrderDto).then((res) => {
							if (res.data.code === 452) {
								this.$alert(res.data.msg, ' ', {
									confirmButtonText: 'OK',
									type: 'warning',
								});
							}
						});
						return this.SAVE_PARTS_SPEC_DETAIL_RESULT.error;
					}

					let damageFactorList = [PartsSpecDetailTable.damageFactor1,
												PartsSpecDetailTable.damageFactor2,
												PartsSpecDetailTable.damageFactor3,
												PartsSpecDetailTable.damageFactor4,
												PartsSpecDetailTable.damageFactor5];

					let count = 4;
					let DuplicationDto = {
						label: ""
					}
					while(count > 0 ){
						if (damageFactorList[count] !== "" && damageFactorList[count] !== " ") {
							let filterList = damageFactorList.filter(l => l === damageFactorList[count]);
							if (filterList.length >= 2) {
								DuplicationDto.label = "損傷要因" + (count + 1).toString();
								break;
							}
						}
						count--;
					}
					if (DuplicationDto.label !== "") {
						GetDuplicationMessage(DuplicationDto).then((res) => {
							if (res.data.code === 452) {
								this.$alert(res.data.msg, ' ', {
									confirmButtonText: 'OK',
									type: 'warning',
								});
							}
						});
						return this.SAVE_PARTS_SPEC_DETAIL_RESULT.error;
					}

					let Dto = {
						partsCode: PartsSpecDetailTable.partsCode,
						dmgCode: PartsSpecDetailTable.dmgCode,
						pltCode: PartsSpecDetailTable.pltCode,
						partsName: PartsSpecDetailTable.partsName,
						partsShapeName: PartsSpecDetailTable.partsShapeName,
						designTemperature: PartsSpecDetailTable.designTemperature,
						designPressure: PartsSpecDetailTable.designPressure,
						regularTemperature: PartsSpecDetailTable.regularTemperature,
						regularPressure: PartsSpecDetailTable.regularPressure,
						operationTemperature: PartsSpecDetailTable.operationTemperature,
						operationPressure: PartsSpecDetailTable.operationPressure,
						baseMaterialName: PartsSpecDetailTable.baseMaterialName,
						cladMaterialName: PartsSpecDetailTable.cladMaterialName,
						baseProductionThickness: PartsSpecDetailTable.baseProductionThickness,
						cladProductionThickness: PartsSpecDetailTable.cladProductionThickness,
						limitThickness: PartsSpecDetailTable.limitThickness,
						managementThickness: PartsSpecDetailTable.managementThickness,
						coefficient: PartsSpecDetailTable.coefficient,
						checkCycle: PartsSpecDetailTable.checkCycle !== null ? Number( this.PartsSpecDetailTable.checkCycle ) : null,
						startUse: PartsSpecDetailTable.startUse,
						corrosionLoopNumber: PartsSpecDetailTable.corrosionLoopNumber,
						damageFactor1: PartsSpecDetailTable.damageFactor1,
						damageFactor2: PartsSpecDetailTable.damageFactor2,
						damageFactor3: PartsSpecDetailTable.damageFactor3,
						damageFactor4: PartsSpecDetailTable.damageFactor4,
						damageFactor5: PartsSpecDetailTable.damageFactor5,
						displayOrder: Number( PartsSpecDetailTable.displayOrder ),
					}
					let res = await SavePartsSpecDetail(Dto);
					if (res.data.code === 0) {
						this.onAdding = false;
						this.$message({
							type: 'success',
							message: res.data.msg
						});

						if (this.$store.state.isCurrentFn) {
							this.$store.state.isCurrentFn();
							this.$store.commit("reSetIsCurrent");
						}
						return this.SAVE_PARTS_SPEC_DETAIL_RESULT.success;
					} else if (res.data.code === 452) {
						this.$alert(res.data.msg, ' ', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
						return this.SAVE_PARTS_SPEC_DETAIL_RESULT.error;
					} else {
						return this.SAVE_PARTS_SPEC_DETAIL_RESULT.error;
					}
				}).catch(() => {
					if (this.$store.state.isCurrentFn) {
						this.$store.state.isCurrentFn();

						if (!isConfirmOrAddButton) {
							this.$store.commit("reSetIsCurrent");
						}
					}
					if (!isConfirmOrAddButton) {
						this.$emit("onEditPartsSpecCancel");
					}
					return this.SAVE_PARTS_SPEC_DETAIL_RESULT.cancel;
				});
				return result;
			} else {
				return this.SAVE_PARTS_SPEC_DETAIL_RESULT.error;
			}
		},

		GetPartsSpecDetail() {
			if (this.selectPartsSpec === undefined || this.selectPartsSpec === null || this.selectPartsSpec.partsCode === null) {
				this.PartsSpecDetailTable  = {
					partsCode: null,
					dmgCode: this.dmgCode,
					pltCode: this.PltCode,
					partsName: "",
					partsShapeName: "",
					partsGroupName: "",
					partsAttributeName: "",
					designTemperature: "",
					designPressure: "",
					regularTemperature: "",
					regularPressure: "",
					operationTemperature: "",
					operationPressure: "",
					baseMaterialName: "",
					cladMaterialName: "",
					baseProductionThickness: "",
					cladProductionThickness: "",
					limitThickness: "",
					managementThickness: "",
					coefficient: "",
					checkCycle: null,
					startUse: "",
					corrosionLoopNumber: "",
					damageFactor1: "",
					damageFactor2: "",
					damageFactor3: "",
					damageFactor4: "",
					damageFactor5: "",
					machineCode: null,
					displayOrder: null,
				}
				this.tempPartsSpecDetailTable = _.cloneDeep(this.PartsSpecDetailTable);
				return;
			}
			let Dto = {
				dmgCode: this.dmgCode,
				partsCode: this.selectPartsSpec.partsCode,
				pltCode: this.PltCode,
			}
			GetPartsSpecDetail(Dto).then((res) => {
				this.PartsSpecDetailTable.partsCode = this.selectPartsSpec.partsCode;
				this.PartsSpecDetailTable.dmgCode = this.dmgCode;
				this.PartsSpecDetailTable.pltCode = this.PltCode;
				this.PartsSpecDetailTable.partsName = res.data.data.partsName;
				this.PartsSpecDetailTable.partsShapeName = res.data.data.partsShapeName;
				this.PartsSpecDetailTable.partsGroupName = res.data.data.partsGroupName;
				this.PartsSpecDetailTable.partsAttributeName = res.data.data.partsAttributeName;
				this.PartsSpecDetailTable.designTemperature = res.data.data.designTemperature;
				this.PartsSpecDetailTable.designPressure = res.data.data.designPressure;
				this.PartsSpecDetailTable.regularTemperature = res.data.data.regularTemperature;
				this.PartsSpecDetailTable.regularPressure = res.data.data.regularPressure;
				this.PartsSpecDetailTable.operationTemperature = res.data.data.operationTemperature;
				this.PartsSpecDetailTable.operationPressure = res.data.data.operationPressure;
				this.PartsSpecDetailTable.baseMaterialName = res.data.data.baseMaterialName;
				this.PartsSpecDetailTable.cladMaterialName = res.data.data.cladMaterialName;
				this.PartsSpecDetailTable.baseProductionThickness = res.data.data.baseProductionThickness;
				this.PartsSpecDetailTable.cladProductionThickness = res.data.data.cladProductionThickness;
				this.PartsSpecDetailTable.limitThickness = res.data.data.limitThickness;
				this.PartsSpecDetailTable.managementThickness = res.data.data.managementThickness;
				this.PartsSpecDetailTable.coefficient = res.data.data.coefficient;
				this.PartsSpecDetailTable.checkCycle = res.data.data.checkCycle;
				this.PartsSpecDetailTable.startUse = res.data.data.startUse;
				this.PartsSpecDetailTable.corrosionLoopNumber = res.data.data.corrosionLoopNumber;
				this.PartsSpecDetailTable.damageFactor1 = res.data.data.damageFactor1;
				this.PartsSpecDetailTable.damageFactor2 = res.data.data.damageFactor2;
				this.PartsSpecDetailTable.damageFactor3 = res.data.data.damageFactor3;
				this.PartsSpecDetailTable.damageFactor4 = res.data.data.damageFactor4;
				this.PartsSpecDetailTable.damageFactor5 = res.data.data.damageFactor5;
				this.PartsSpecDetailTable.machineCode = res.data.data.machineCode;
				this.PartsSpecDetailTable.displayOrder = res.data.data.displayOrder;
				this.tempPartsSpecDetailTable = _.cloneDeep(this.PartsSpecDetailTable);
			});
		},
		async saveFn() {
			if (JSON.stringify(this.PartsSpecDetailTable) !== JSON.stringify(this.tempPartsSpecDetailTable))
			{
				var copySavePartsSpecDetail = _.cloneDeep(this.PartsSpecDetailTable);
				let result = await this.SavePartsSpecDetail(copySavePartsSpecDetail, false);
				if (result === this.SAVE_PARTS_SPEC_DETAIL_RESULT.success) {
					this.tempPartsSpecDetailTable = _.cloneDeep(this.PartsSpecDetailTable); /// onSavedPartsSpecの後selectPartsSpecの変更が検知されるため一緒の値にしておく
					// 部位仕様保存後リスト部を更新する
					this.$emit("onSavedPartsSpec", false);
				}
			}
		},
        addLimitation(item) {
            if (isNaN(item)) {
                return this.$setMaxLength(item, 20)
            }
            if (!isNaN(item)) {
                let arr = [5, 3];
                if (arr[1] == 0 && item.toString().indexOf('.') != -1) {
                    item = item.toString().substr(0, item.toString().length - 1)
                }
                if (item.toString().indexOf('.') == -1) {  //没有小数点
                    if (item.toString().length > arr[0]) {
                        item = item.toString().substr(0, arr[0]);
                    }
                } else {
                    try {
                        let testArr = item.toString().split('.');
                        item = `${testArr[0].substr(0, arr[0])}.${testArr[1].substr(0, arr[1])}`
                    } catch (error) {
                        console.log(error);
                    }
                }
                return item
            }
        },
	},

	created() {
	},
	mounted() {
        eventBus.$on("EventBusPartsSpecSaveFn", () => {
			this.saveFn();
        })
    },
    beforeDestroy() {
        eventBus.$off("EventBusPartsSpecSaveFn")
    },
};
</script>

<style lang="scss" scoped>
.edit-comp-root {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0px 10px;
	overflow-y: scroll;
}

.edit-comp {
	width: 100%;
	height: 90%;
	overflow-y: scroll;
	display: flex;
}

.edit-comp-elinput {
	width: 90%;
}

.edit-comp-unit {
	width: 5%;
	display: flex;
    flex-flow: column;
	position: relative;
}

.footer1 {
    position: absolute;
    width: 100%;
    top: 175px;
    left: 10px;
}

.footer2 {
    position: absolute;
    width: 100%;
    top: 215px;
    left: 10px;
}

.footer3 {
    position: absolute;
    width: 100%;
    top: 255px;
    left: 10px;
}

.footer4 {
    position: absolute;
    width: 100%;
    top: 295px;
    left: 10px;
}

.footer5 {
    position: absolute;
    width: 100%;
    top: 335px;
    left: 10px;
}

.footer6 {
    position: absolute;
    width: 100%;
    top: 375px;
    left: 10px;
}

.footer7 {
    position: absolute;
    width: 100%;
    top: 495px;
    left: 10px;
}

.footer8 {
    position: absolute;
    width: 100%;
    top: 535px;
    left: 10px;
}

.footer9 {
    position: absolute;
    width: 100%;
    top: 575px;
    left: 10px;
}

.footer10 {
    position: absolute;
    width: 100%;
    top: 615px;
    left: 10px;
}

.row-line-head {
	width: 100%;
	display: flex;
	align-items: center;

	button {
		width: 90px;
	}
}

.a-form-item {
	width: 100%;
	align-items: center;
}

.row-line {
	width: 100%;
	display: flex;
	padding: 5px 10px;
	align-items: center;
}

.row-reverse {
	flex-direction: row-reverse;
}

.divider {
	width: 100%;
	height: 1px;
	background-color: #eaeaeb;
}

button {
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0px 10px;

	border: 1px solid #eaeaeb;
	border-radius: 4px;
}

.activeBtn {
	// background: #106ebe;
	// color: #fff;
}

.bottom-lay {
	position: absolute;

	width: 90%;
	height: 32px;
	bottom: 10px;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	// background-color: red;
	button {
		height: 100%;
		// width: 66px;
	}
}

::v-deep .el-input.is-disabled .el-input__inner {
	background: #fff;
}

::v-deep .el-radio-group.is-disabled .el-radio-group__inner {
	background: #fff;
}

.content-radios {
	width: 100%;
	height: 100%;
	border: 1px solid #dcdfe6;
	background-color: #fff;
	display: inline-block;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	padding: 5px 10px;
}

.yellow {
	background-color: #ffffe1;
}

.iptYellow {
	::v-deep .el-input__inner {
		background-color: #ffffe1 !important;
	}
}

.ipt {
	width: 100%;
	height: 32px;

	::v-deep .el-input__inner {
		// width: 238px;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		height: 32px;
		right: 0;
		top: 4px;
		line-height: 32px;

		background: #dee0e3;
	}
}

.date_ipt {
	height: 32px;
	max-width: 100%;

	::v-deep .el-input__inner {
		height: 32px;
		text-align: center;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}
}

.dialog-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

::v-deep .el-form-item {
	margin-bottom: 0px;
	padding: 0px;
	//   height: 30px;
}


::v-deep .is-error {
	height: 40px;
	transition: all .3s;
}

::v-deep .is-required {
	height: 40px;
	transition: all .3s;
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

.orange {

	::v-deep .el-input__inner {
		background: rgb(255, 222, 172) !important;
	}
}

.bg-orange {
	background: rgb(255, 222, 172) !important;
}

.FFF {
	::v-deep .el-input__inner {
		background: #FFF !important;
	}
}

.text-right {
	::v-deep .el-input__inner {
		text-align: right;
	}
}

</style>